<template>
  <view
    class="hb-px-4 hb-py-3 hb-bg-white hb-rounded-bl-2xl hb-rounded-br-2xl hb-flex hb-items-center hb-gap-4 hb-sticky hb-z-10"
    style="box-shadow: 0px 4rpx 24rpx 0px rgba(150, 151, 153, 0.16)"
    :style="{ top: props.headerHeight + 'px' }"
  >
    <TmButton
      :margin="[0, 0]"
      :padding="[0, 0]"
      :follow-theme="false"
      color="#F2F3F5"
      font-color="#333"
      :width="160"
      :height="64"
      :round="16"
      id="home-guide-step-2"
      @click="handleToCard"
    >
      <text class="ali-icon hb-text-base hb-mr-1">&#xe627;</text>
      <text class="hb-text-sm">名片</text>
    </TmButton>
    <TmButton
      :margin="[0, 0]"
      :padding="[0, 0]"
      :follow-theme="false"
      color="#F2F3F5"
      font-color="#333"
      :width="188"
      :height="64"
      :round="16"
      id="home-guide-step-3"
      @click="handleToKnowledgeBase"
    >
      <text class="ali-icon hb-text-base hb-mr-1">&#xe62d;</text>
      <text class="hb-text-sm">知识库</text>
    </TmButton>
    <TmButton
      v-if="userInfo?.aiUserAccountBotVo"
      :margin="[0, 0]"
      :padding="[0, 0]"
      :follow-theme="false"
      color="#F2F3F5"
      font-color="#333"
      :width="188"
      :height="64"
      :round="16"
      @click="shareVisible = true"
    >
      <text class="ali-icon hb-text-base hb-mr-1">&#xe6ce;</text>
      <text class="hb-text-sm">分享</text>
    </TmButton>
  </view>
  <CustomShare v-model="shareVisible" :wx-share-options="wxShareOptions" :code-url="userInfo?.aiUserAccountBotVo.qrCodeUrl" />
</template>

<script setup lang="ts">
  import { getUrl } from '@/router';
  import { GuideType, useGuideStore } from '@/store/modules/guide';
  import { useUserStore } from '@/store/modules/user';
  import { isCreatedAI } from '@/utils/is';
  import { propTypes } from '@/utils/propTypes';

  const props = defineProps({
    headerHeight: propTypes.number.def(0),
  });

  const { userInfo } = storeToRefs(useUserStore());

  const shareVisible = ref(false);
  const wxShareOptions = computed(() => ({
    title: `推荐「${userInfo.value?.aiUserAccountBotVo.name}」的智能助手,【立即问TA】`,
    path: getUrl('cardDetail', { uuid: userInfo.value!.aiUserAccountBotVo.uuid }),
    imageUrl: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/share-img.png',
  }));

  const handleToCard = () => {
    isCreatedAI(() => {
      navigateTo({
        name: 'cardDetail',
        options: { uuid: userInfo.value?.aiUserAccountBotVo.uuid! },
      });
    });
  };

  /** 跳转知识库 */
  const handleToKnowledgeBase = () => {
    isCreatedAI(() => {
      navigateTo({ name: 'knowledgeBase' });
    });
  };

  const ins = getCurrentInstance();
  useGuideStore().addGuide(
    1,
    {
      title: '智能名片',
      description: '可设置管理您的智能名片信息，让其他人了解你。',
      nodeInfo: {
        selector: '#home-guide-step-2',
        ins,
      },
    },
    GuideType.HOME,
  );
  useGuideStore().addGuide(
    2,
    {
      title: '知识库',
      description: '可管理上传让AI智能助手学习的文件，让AI智能助手更懂你',
      nodeInfo: {
        selector: '#home-guide-step-3',
        ins,
      },
    },
    GuideType.HOME,
  );

  onShareAppMessage(() => ({}));
</script>

<style scoped></style>
